<!DOCTYPE html><html><head><title>02-第二章 盒模型</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="02-第二章-盒模型">02-第二章 盒模型</h1>

<p></p>

<hr>



<h2 id="一盒子模型">一、盒子模型</h2>

<blockquote>
  <p>盒子模型是HTML是网页中一个非常重要的知识点，也是学习HTML的基础</p>
</blockquote>



<p><img longdesc="./1515134823959.png" alt="Alt text" title="" type="image/png" class="" src=""></p>



<h4 id="1border-边框元素边框的样式">（1）、border  边框：元素边框的样式</h4>

<blockquote>
  <p>单样式:</p>
  
  <ul><li><code>border-width</code>大小                       </li>
  <li><code>border-style</code> 样式              </li>
  <li><code>border-color</code> 颜色</li>
  </ul>
  
  <p>复合样式:大小 类型 颜色</p>
  
  <ul><li><code>border</code> :width  style  color </li>
  </ul>
  
  <p>边框类型 ：<code>border-style</code></p>
  
  <ul><li><code>solid</code>      实线</li>
  <li><code>dashed</code>  虚线  （有兼容问题）</li>
  <li><code>dotted</code>   点线   （有兼容问题）</li>
  <li><code>double</code>   双边框</li>
  </ul>
  
  <p>边框类型：</p>
  
  <ul><li><code>border-top</code> 左边框</li>
  <li><code>border-right</code>右边框</li>
  <li><code>border-bottom</code> 下边框</li>
  <li><code>border-left</code> 左边框</li>
  </ul>
</blockquote>

<p>去除边框:<code>border:none</code>;</p>

<p>=&gt;padding会改变盒子大小</p>

<hr>



<h4 id="2内边距内容与边框直接的距离">（2）、内边距：内容与边框直接的距离</h4>

<blockquote>
  <p>单样式:</p>
  
  <ul><li><code>padding-top</code>:顶部内距离</li>
  <li><code>padding-right</code>:右边内距离</li>
  <li><code>padding-bottom</code>:底部内距离</li>
  <li><code>padding-left</code>:左边内距离</li>
  </ul>
  
  <p>复合样式：</p>
  
  <ul><li>四个值：<code>padding</code>:上 右 下 左</li>
  <li>三个值：<code>padding</code>:上 左右 下</li>
  <li>二个值：<code>padding</code>:上下 左右</li>
  <li>一个值：<code>padding</code>: 四个方向相同的值；</li>
  </ul>
</blockquote>

<p>=&gt;padding会改变盒子大小</p>

<hr>



<h4 id="3外边距元素距离其他元素的距离">（3）、外边距，元素距离其他元素的距离</h4>

<blockquote>
  <p>单样式:</p>
  
  <ul><li><code>margin-top</code>:顶部外距离</li>
  <li><code>margin-right</code>:右边外距离</li>
  <li><code>margin-bottom</code>:底部外距离</li>
  <li><code>margin-left</code>:左边外距离</li>
  </ul>
  
  <p>复合样式：</p>
  
  <ul><li>四个值：<code>margin</code>:上 右 下 左</li>
  <li>三个值：<code>margin</code>:上 左右 下</li>
  <li>二个值：<code>margin</code>:上下 左右</li>
  <li>一个值：<code>margin</code>: 四个方向相同的值；</li>
  <li>盒子水平居中： <br>
  <ul>
  <li>margin: <code>auto</code>   || margin:top <code>auto</code>||  margin:top <code>auto</code> bottom </li></ul></li>
  </ul>
</blockquote>

<hr>



<h2 id="二盒子模型计算公式">二、盒子模型计算公式</h2>

<blockquote>
  <p>盒子宽度 = 左border+左padding+width+右padding +右border <br>
  盒子高度 = 上border+上padding+height+下padding+下border</p>
</blockquote>

<hr>



<h2 id="三盒子模型计算公式">三、盒子模型计算公式</h2>

<blockquote>
  <p>1）<code>px</code>像素 是显示器中大小单位 <br>
  2）<code>%</code> 是相对父级大小的占比;</p>
</blockquote>

<hr>



<h2 id="四color颜色的多种值">四、color颜色:的多种值</h2>

<blockquote>
  <ul><li>英文（颜色英文单词）</li>
  <li>十六进制 （<code>#00ff99</code>）</li>
  <li><code>rgb（</code>0-255,0-255,0-255<code>）</code>-三个值 r-red红 g-green绿 b-blue蓝</li>
  <li><code>rgba(</code>0-255,0-255,0-25,0-1<code>)</code> 四个值 r-red红 g-green绿 b-blue蓝 a-透明度</li>
  </ul>
</blockquote>

<hr>



<h2 id="五color颜色的多种值">五、color颜色:的多种值</h2>

<blockquote>
  <p><code>width</code>        宽度 <br>
  <code>height</code>       高度 <br>
  <code>background</code>   背景 <br>
  <code>border</code>        边框 <br>
  <code>padding</code>      内边距 <br>
  <code>margin</code>       外边距</p>
</blockquote>

<hr>



<h2 id="六外边距合并">六、外边距合并</h2>

<blockquote>
  <p>外边距合并指的是，当两个（<code>垂直外边距</code>）相遇时，它们将形成一个外边距。 <br>
  合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</p>
</blockquote>

<p>一：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：</p>



<p><img longdesc="./1515502255112.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<p>二：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：</p>



<p><img longdesc="./1515502272115.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<blockquote>
  <p>注释：只有<code>普通文档流</code>中块级的垂直外边距才会发生外边距合并。<code>行内框</code>、<code>浮动框</code>或<code>绝对定位</code>之间的外边距不会合并。</p>
</blockquote></div></body></html>